<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <style>
    
/* 定义动画 */
        @keyframes move{
            from {
    
    transform: scale(1);
  }
  25% {
   transform: scale(0.2) translatey(100px);
  }
  50% {
    transform: scale(1) translatey(-30px);
  }
  75% {
   transform: scale(0.2) translatey(100px);
  }
  to {
    transform: scale(1) ;
  }
}

@keyframes mov{
            from {
    
    transform: scale(1);
  }
  25% {
   transform: scale(0.2)translatey(-100px) translatex(-80px);
  }
  50% {
    transform: scale(1) translatey(-15px) translatex(20px);
    
  }
  75% {
   transform: scale(0.2)translatey(-100px) translatex(-80px) ;
  }
  to {
    transform: scale(1) ;
  }
}

body{
  width: 100%;
  height: 800px;
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box{
 transform: rotate(45deg);
}
 .boxa{
   width: 70px;
   height: 10px;
   background-color: rgba(25,0,0,0.3 );
   border-radius: 50%;
   position: absolute;
   top: 500px;
   animation: mov 2s ease 0s infinite;
   /* transform: scale(0.1); */
   /* transform: skew(50deg); */
  
 }
.box1{
  width: 100px;height: 100px;
  background-color: rgb(223, 149, 149);
   animation: move 2s ease 0s infinite normal none;

}
.box1::after{
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 100px;
  height: 100px;
  
  bottom:50%;

  background-color: rgb(223, 149, 149);
  
}
.box1::before{
  position: absolute;
   
  right: 50%;
  content:"";
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: rgb(223, 149, 149);
  
}
    </style>
</head>
<body>
  <div class="boxa"></div>
<div class="box">  
  <div class="box1"></div> 
</div>

  
    
</body>
</html>